<template>
    <a-modal v-model:visible="visible" :width="600" title="选择" @ok="handleOk">
        <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 7 }">
            <a-form-item label="资源编码" name="id">
                <a-input v-model:value="form.id" />
            </a-form-item>
            <a-form-item label="资源名称" name="name">
                <a-input v-model:value="form.name" />
            </a-form-item>
            <a-form-item label="资源类型" name="resourceType">
                <a-select  v-model:value="form.resourceType" :options="typeOptions"></a-select>
            </a-form-item>
            <a-form-item label="父级编码" name="parentId">
                <a-input v-model:value="form.parentId" />
            </a-form-item>
            <a-form-item label="父级名称" name="parentName">
                <a-input v-model:value="form.parentName" />
            </a-form-item>
            <a-form-item label="资源地址" name="resourceUrl">
                <a-input v-model:value="form.resourceUrl" />
            </a-form-item>
            <a-form-item label="权限标识" name="permission">
                <a-input v-model:value="form.permission" />
            </a-form-item>
            <a-form-item label="触发动作" name="resourceAction">
                <a-input v-model:value="form.resourceAction" />
            </a-form-item>
            <a-form-item label="资源样式" name="resourceStyle">
                <a-input v-model:value="form.resourceStyle" />
            </a-form-item>
            <a-form-item label="资源图标" name="resourceIcon">
                <a-input v-model:value="form.resourceIcon" />
            </a-form-item>
            <a-form-item label="排序" name="sortIndex">
                <a-input v-model:value="form.sortIndex" />
            </a-form-item>
            <a-form-item label="状态" name="status">
                <a-input v-model:value="form.status" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script setup>
import { ref, reactive } from "vue"
import {resourcesApi} from '/@/api/permissions/resources'
import { message } from "ant-design-vue";
const visible = ref(false)

// 组件ref
const formRef = ref();
const formDefault = {
    id: '',//资源编码
    name:'',//资源名称
    resourceType: '',//资源类型
    parentId: '',//父级编码
    parentName: '',//父级名称
    resourceUrl: '',//资源地址
    permission: '',//权限标识
    resourceAction: '',//触发动作
    resourceStyle: '',//资源样式
    resourceIcon: '',//资源图标
    sortIndex: '',//排序
    status: '',//状态
};
let form = reactive({ ...formDefault });
const rules = {
    name: [{ required: true, message: '请输入资源名称' }],
    resourceType: [{ required: true, message: '请选择资源类型' }],
    parentId: [{ required: true, message: '请输入父级编码' }],
};
const typeOptions = [
    {label:'菜单',value:'MENU'},
    {label:'页面',value:'PAGE'},
    {label:'模块',value:'MODULE'},
    {label:'元素',value:'ELEMENT'},
    {label:'按钮',value:'BUTTON'},
    {label:'文件',value:'FILE'},
    {label:'数据',value:'DATA'},
    {label:'其他',value:'OTHER'}
]
function showModal() {
    Object.assign(form, formDefault);
    visible.value = true
}
function onClose(){
    visible.value = false;
    Object.assign(form,formDefault)
}
function handleOk(){
    formRef.value
        .validate()
        .then(() => {
            resourcesApi.add(form).then(res=>{
                message.success('添加成功!')
                onClose()
            })
        })
        .catch((error) => {
          console.log('error', error);
        });
}
defineExpose({
    showModal,
});
</script>
<style scoped></style>
